<template name="component-name">
  <div class="app-container">
    <el-card class="box-card" :body-style="{ 'min-height': 'calc(100vh - 110px)',padding: '24px' }">
      <el-row>
        <el-col :span="24">
          <el-form ref="tenantForm" :inline="true" :model="tenantQuery">
            <el-form-item label="租户名称" prop="tenantName">
              <el-input v-model="tenantQuery.tenantName" clearable placeholder="请输入租户名称" />
            </el-form-item>
            <el-form-item label="租户编码" prop="tenantId">
              <el-input v-model="tenantQuery.tenantId" clearable placeholder="请输入租户编码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
              <el-button @click="resetForm('tenantForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
          <!-- table data -->
          <el-table
            v-loading="tenantLoading"
            :data="tenantList"
            border
            fit
            highlight-current-row
            header-cell-class-name="table-header-cell"
            style="width: 100%; margin-top:10px;"
          >
            <el-table-column
              fixed
              prop="sId"
              label="序号"
              type="index"
              width="100px"
            />
            <el-table-column
              v-if="1>2"
              prop="id"
              label="ID"
            />
            <el-table-column
              prop="tenantName"
              label="租户名称"
            />
            <el-table-column
              prop="tenantId"
              label="租户ID"
            />
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button type="info" size="mini" @click="handleUpdate(row)">修改</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(row)">删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="tenantQuery.current" :limit.sync="tenantQuery.size" @pagination="getTenantList" />
        </el-col>
      </el-row>
    </el-card>
    <!-- dialog -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
      <el-form ref="tenantDialogForm" :rules="rules" :model="tenantTemp" label-position="left" label-width="90px" style="width: 80%; margin-left:50px;">
        <el-form-item label="租户名称" prop="tenantName">
          <el-input v-model="tenantTemp.tenantName" clearable placeholder="请输入租户名称" />
        </el-form-item>
        <el-form-item label="租户编码" prop="tenantId">
          <el-input v-model="tenantTemp.tenantId" :readonly="updateEnable ? true : false" clearable placeholder="请输入租户编码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { fetchTenants, deleteTenant, addTenant, updateTenant } from '@/api/tenant.js'
export default {
  name: 'SysTenant',
  components: { Pagination },
  data() {
    return {
      tenantLoading: false,
      dialogFormVisible: false,
      updateEnable: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      total: 0,
      tenantList: [],
      tenantQuery: {
        current: 1,
        size: 10,
        tenantName: '',
        tenantId: ''
      },
      tenantTemp: {
        tenantName: '',
        tenantId: ''
      },
      rules: {
        tenantName: [{ required: true, message: '租户名称不能为空', trigger: 'change' }],
        tenantId: [{ required: true, message: '租户编码不能为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getTenantList()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    resetTenantTemp() {
      this.tenantTemp = {
        tenantName: '',
        tenantId: ''
      }
    },
    getTenantList() {
      this.tenantLoading = true
      fetchTenants(this.tenantQuery).then(response => {
        const res = response.retBody
        this.tenantList = res.records
        this.total = res.total
      }).finally(() => {
        setTimeout(() => {
          this.tenantLoading = false
        }, 1 * 1000)
      })
    },
    handleFilter() {
      this.tenantQuery.current = 1
      this.getTenantList()
    },
    handleCreate() {
      this.resetTenantTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['tenantDialogForm'].clearValidate()
      })
    },
    handleUpdate(row) {
      this.tenantTemp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.updateEnable = true
      this.$nextTick(() => {
        this.$refs['tenantDialogForm'].clearValidate()
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除该条租户信息吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTenant(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除租户成功',
            type: 'success',
            duration: 1000
          })
          this.getTenantList()
          this.$bus.emit('RefreshNavTenantList', 'delete')
        })
      }).catch(() => {

      })
    },
    createData() {
      this.$refs['tenantDialogForm'].validate((valid) => {
        if (valid) {
          addTenant(this.tenantTemp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增租户成功',
              type: 'success',
              duration: 1000
            })
            this.getTenantList()
            this.$bus.emit('RefreshNavTenantList', 'insert')
          })
        }
      })
    },
    updateData() {
      this.$refs['tenantDialogForm'].validate((valid) => {
        if (valid) {
          updateTenant(this.tenantTemp.id, this.tenantTemp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '修改租户信息成功',
              type: 'success',
              duration: 1000
            })
            this.getTenantList()
          })
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
